<template>
	<view>
		<view class="header">
			<u-navbar :border-bottom='false' back-icon-size='48' :background="background" back-icon-color='#FFFFFF'>
			</u-navbar>
			<view class="userBox">
				<image class="h-pic" src="../../../static/imgs/del/del.png" mode=""></image>
				<view class="name">
					<view class="name-tit">
						浩二不二
					</view>
					<view class="id-tit">
						ID:1233655665
					</view>
				</view>
			</view>
			<view class="totalNum">
				<view class="num-ul">
					<view class="num-li">
						<text class="num">10</text>
						<text class="txt">关注</text>
					</view>
					<view class="num-li">
						<text class="num">10</text>
						<text class="txt">粉丝</text>
					</view>
					<view class="num-li" @click="showPop=true">
						<text class="num">10</text>
						<text class="txt">获赞与收藏</text>
					</view>
				</view>
				<!-- 未关注 -->
				<!-- <view class="atten">
					关注
				</view>
				<view class="liuyan">
					<image src="../../../static/imgs/liuyan.png" mode=""></image>
				</view> -->
				<!-- 已关注 -->
				<view class="atten">
					发消息
				</view>
				<view class="liuyan" @click="showModal=true">
					<image src="../../../static/imgs/qxgz.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="tab-bar">
				<u-tabs :list="list" :is-scroll="false" height='88' :current="current" @change="tabChange"
					active-color='#333333' inactive-color='#999999' :bar-style='barStyle' bar-width='56' bar-height="4">
				</u-tabs>
			</view>
			<!-- 笔记 -->
			<view class="container" v-show="current == 0">
				<u-waterfall v-model="flowList">
					<template v-slot:left="{leftList}">
						<view class="art-item" v-for="(item, index) in leftList" :key="index">
							<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
							<view class="title">
								水磨沟景区位于广元市朝天区
							</view>
							<view class="user">
								<view class="left">
									<image src="../../../static/imgs/del/del.png" mode=""></image>
									<text>浩二</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28">
									</u-icon>
									<!-- <u-icon name="heart" color="#666666" size="28"></u-icon> -->
									<text style="margin-left: 6rpx;">1</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="art-item" v-for="(item, index) in rightList" :key="index">
							<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
							<view class="title">
								水磨沟景区位于广元市朝天区水磨沟景区位于广元市朝天区水磨沟景区位于广元市朝天区
							</view>
							<view class="user">
								<view class="left">
									<image src="../../../static/imgs/del/del.png" mode=""></image>
									<text>浩二</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28">
									</u-icon>
									<!-- <u-icon name="heart" color="#666666" size="28"></u-icon> -->
									<text style="margin-left: 6rpx;">1</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<view class="noCont" v-if="flowList.length == 0 && current == 0">
				<image src="../../../static/imgs/zanwujl.png" mode=""></image>
				<view class="tip">
					暂未发布笔记
				</view>
			</view>
			<!-- 收藏 -->
			<view class="container" v-show="current == 1">
				<u-waterfall v-model="flowList1">
					<template v-slot:left="{leftList}">
						<view class="art-item" v-for="(item, index) in leftList" :key="index">
							<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
							<view class="title">
								水磨沟景区位于广元市朝天区
							</view>
							<view class="user">
								<view class="left">
									<image src="../../../static/imgs/del/del.png" mode=""></image>
									<text>浩二</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28">
									</u-icon>
									<!-- <u-icon name="heart" color="#666666" size="28"></u-icon> -->
									<text style="margin-left: 6rpx;">1</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="art-item" v-for="(item, index) in rightList" :key="index">
							<image class="icon" src="../../../static/imgs/del/faxiandel.png" mode=""></image>
							<view class="title">
								水磨沟景区位于广元市朝天区水磨沟景区位于广元市朝天区水磨沟景区位于广元市朝天区
							</view>
							<view class="user">
								<view class="left">
									<image src="../../../static/imgs/del/del.png" mode=""></image>
									<text>浩二</text>
								</view>
								<view class="right">
									<u-icon name="heart-fill" color="#EC3A54" size="28">
									</u-icon>
									<!-- <u-icon name="heart" color="#666666" size="28"></u-icon> -->
									<text style="margin-left: 6rpx;">1</text>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			
			<view class="noCont" v-if="flowList1.length == 0 && current == 1">
				<image src="../../../static/imgs/zanwujl.png" mode=""></image>
				<view class="tip">
					暂无收藏
				</view>
			</view>
		</view>
		<u-popup v-model="showPop" mode="center" border-radius="16">
			<view class="tipsBox">
				<view class="title">
					获赞与收藏
				</view>
				<view class="statis">
					<view class="statis-li">
						<image src="../../../static/imgs/dqfbs.png" mode=""></image>
						<view class="tit">
							当前发布笔记数
						</view>
						<view class="num">
							265
						</view>
					</view>
					<view class="statis-li">
						<image src="../../../static/imgs/dqhzs.png" mode=""></image>
						<view class="tit">
							当前获得点赞数
						</view>
						<view class="num">
							21616
						</view>
					</view>
					<view class="statis-li">
						<image src="../../../static/imgs/dqscs.png" mode=""></image>
						<view class="tit">
							当前获得收藏数
						</view>
						<view class="num">
							21
						</view>
					</view>
				</view>
				<view class="btn" @click="showPop=false">
					我知道了
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showModal" :content="content" :show-title='false' show-cancel-button @confirm="confirmFn"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:"确认不再关注吗？",
				showModal:false,
				showPop:false,
				flowList1:[],
				flowList: [1, 2],
				current: 0,
				list: [{
					name: '笔记'
				}, {
					name: '收藏'
				}],
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				barStyle: {
					backgroundColor: '#3587F7'
				}
			}
		},
		methods: {
			// 取消关注
			confirmFn(){
				
			},
			tabChange(index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 500rpx;
		padding: 100rpx 20rpx 0;
		background: linear-gradient(180deg, #1C3453, #305489);

		.userBox {
			display: flex;

			.h-pic {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
			}

			.name {
				margin-left: 30rpx;

				.name-tit {
					font-size: 36rpx;
					font-weight: 600;
					font-family: PingFang SC;
					color: #FFFFFF;
				}

				.id-tit {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.totalNum {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.num-ul {
				display: flex;
				align-items: center;
				width: 44%;
				justify-content: space-between;

				.num-li {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.num {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.txt {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.8);
					}
				}
			}

			.atten {
				margin-left: 120rpx;
				width: 160rpx;
				height: 56rpx;
				background: #3587F7;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 56rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.liuyan {
				margin-left: auto;
				width: 88rpx;
				height: 56rpx;
				image {
					width: 88rpx;
					height: 56rpx;
				}
			}

		}
	}

	.content {
		margin-top: -20rpx;
		width: 100%;
		background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F7 100%);
		border-radius: 24rpx 24rpx 0 0;

		.tab-bar {
			width: 30%;
			margin: 0 auto;
		}

		.container {
			padding: 10rpx 15rpx 0;

			.art-item {
				width: 348rpx;
				height: auto;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #FFFFFF;
				padding-bottom: 20rpx;

				.icon {
					width: 348rpx;
					height: 460rpx;
				}

				.title {
					padding: 0 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical
				}

				.user {
					margin-top: 8rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
						}

						text {
							margin-left: 6rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 300;
							color: #666666;
						}
					}

					.right {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #666666;
					}
				}
			}
		}
	}

	.noCont {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 312rpx;
			height: 234rpx;
		}

		.tip {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #A5A5A5;
		}
	}

	.tipsBox {
		width: 500rpx;
		height: 566rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.title {
			width: 500rpx;
			height: 120rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			text-align: center;
			line-height: 120rpx;
			border-bottom: 2rpx solid #F2F2F2;
		}
		.statis {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 66rpx;
			padding-top: 40rpx;
			.statis-li {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				.tit {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #666666;
					margin: 0 20rpx;
				}
				.num {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
		}
		.btn {
			margin: 20rpx auto 0;
			width: 400rpx;
			height: 88rpx;
			background: #3587F7;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
